<template>
  <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <nav>
        <div class="city-entry" @click="handleCityClick">
          <span>北京</span>
          <span class="city-entry-arrow"></span>
        </div>
        <ul>
          <router-link tag="li" active-class="active" to="/movie/intheaters">热映</router-link>
          <router-link tag="li" active-class="active" to="/movie/comingsoon">待映</router-link>
        </ul>
        <div class="search-icon"></div>
      </nav>
      <router-view :hot-list="hotList"></router-view>
    </van-list>
  </van-pull-refresh>
</template>

<script>

import Vue from 'vue'
import { List, PullRefresh } from 'vant'
Vue.use(List)
Vue.use(PullRefresh)

import http from '@u/http'
import '@f/wh'

export default {
  data() {
    return {
      hotList: [],
      loading: false,
      finished: false,
      refreshing: false,
    }
  },

  created() {
    this.limit = 12
    this.city = '北京'
    this.page = 0
  },

  async mounted() {
    
  },

  methods: {

    async onLoad() {
      if (this.refreshing) {
        this.offset = 0
      }

      // 加载数据
      let result = await http.get('/api/mmdb/movie/v2/list/hot.json', {
        limit: this.limit,
        offset: this.page * this.limit,
        ct: this.city
      })

      if (this.refreshing) {
        this.hotList = []
        this.refreshing = false
      }
      this.hotList = [
        ...this.hotList,
        ...result.data.hot
      ]

      this.page++
      this.loading = false

      if (this.page >= Math.ceil(result.data.total / 12)) {
        this.finished = true
      }
    },

    onRefresh() {
      // 清空列表数据
      this.finished = false

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      this.onLoad()
    },

    handleCityClick() {
      this.$router.push('/city')
    }
  }
}
</script>

<style lang='stylus' scoped>
@import '~@a/stylus/border.styl'
@import '~@a/stylus/ellipsis.styl'

nav
  height .44rem
  display flex
  border_1px(0 0 1px 0, #ccc)

  ul
    flex 1
    display flex
    height .44rem
    padding-left 6%
    padding-right 10%
    li
      flex 1
      position relative
      line-height .44rem
      text-align center
      color #666
      font-weight bold
      &.active
        color #cc4c43
      &.active:after
        position absolute
        content ''
        width .44rem
        height .02rem
        background #cc4c43
        bottom 0
        left 50%
        transform translate(-50%, -50%)

  div.city-entry
    color #666
    width .7rem
    text-align center
    line-height .44rem
    font-size .14rem
    span.city-entry-arrow
      width 0
      height 0
      border .04rem solid #b0b0b0
      border-left-color transparent
      border-right-color transparent
      border-bottom-color transparent
      display inline-block
      margin-left .04rem
      margin-top .05rem

  div.search-icon
    width .44rem
    height .44rem
    background url('') no-repeat
    background-size .2rem
    padding .10rem .15rem .10rem .10rem
    background-position .1rem
    border_1px(0 0 0 1px, #ccc)
</style>